<template>
	<view class="page-header-compontent" :class="[(gradient&&gradientValue==='default')?'gradient-default':'']"  :style="{
		color:color,
		backgroundColor:gradient?'transparent':(backgroundColor?backgroundColor:'transparent'),
		backgroundImage:gradient?(gradientValue!=='default'?gradientValue:'none'):'none'
	}">
		<view class="left-action" v-if="$scopedSlots.left" @tap.stop="onAsideClick('left')"><slot name="left"></slot></view>
		<view class="title"><slot></slot></view>
		<view class="right-action" v-if="$scopedSlots.right" @tap.stop="onAsideClick('right')"><slot name="right"></slot></view>
	</view>
</template>

<script>
export default {
	name:'pageheaderCompontent',
	emits:['click'],
	props:{
		color:{
			type:String,
			default:'#212121'
		},
		/* 是否启用底色渐变（backgroundImage） */
		gradient:{
			type:Boolean,
			default:false
		},
		/* 底色渐变(backgroundImage)值，css语法，default时使用默认渐变色 */
		gradientValue:{
			type:String,
			default:'default'
		},
		backgroundColor:{
			type:String,
			default:''
		}
	},
	methods:{
		onAsideClick(type){
			this.$emit('click',type)
		}
	}
}
</script>

<style scoped lang="scss">
.page-header-compontent{
	width: 100%;
	height: 90rpx;
	position: relative;
	font-size: 32rpx;
	&.gradient-default{
		background-image: linear-gradient(to right, $color-paimary-darken, $color-paimary-middle) !important;
	}
	.title{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.2em;
	}
	>.left-action,>.right-action{
		position: absolute;
		top:0;
		height: 100%;
		z-index: 5;
		display: flex;
		align-items: center;
	}
	>.left-action{
		left: 0rpx;
		padding-left: 8px;
	}
	>.right-action{
		right: 0rpx;
		padding-right: 8px;
	}
}
</style>